import React, { Component } from 'react';
import Routes from './routes';
import DocumentTitle from 'react-document-title';
import SiderCustom from './components/SiderCustom';
import HeaderCustom from './components/HeaderCustom';
import { connectAlita } from 'redux-alita';
import { Layout, notification, Icon, Button } from 'antd';

const { Header,Content, Footer } = Layout;

class App extends Component{
  state = {
    collapsed: false,
    title: ''
  }
  toggle = () => {
    this.setState({
        collapsed: !this.state.collapsed,
    });
  };
  render(){
    const {title} = this.state
    const { auth = { data: {} }, responsive = { data: {} } } = this.props;
    return(
      <DocumentTitle title="系统">
        <Layout>
          <SiderCustom collapsed={this.state.collapsed} />
          {/* <Header>Header</Header> */}
          <Layout style={{ flexDirection: 'column' }}>
            <HeaderCustom
                toggle={this.toggle}
                collapsed={this.state.collapsed}
                user={auth.data || {}}
            />
            <Content style={{ margin: '0 16px', overflow: 'initial', flex: '1 1 0' }}> 
              {/* 加载route */}
              <Routes auth={auth} />
            </Content>
          </Layout>
          {/* <Footer>Footer</Footer> */}
        </Layout>
      </DocumentTitle>
    )
  }
}

export default connectAlita(['auth', 'responsive'])(App);;
